<template>
  <div class="index">
    <div class="header">
      <Nav></Nav>
    </div>
    <div class="page-contents">
      <span class="iconfont icon-jiantou" @click="down"></span>
      <vue3VideoPlay v-bind="options" :src="options.src" @ended="ended" />
    </div>

    <div class="brand-con" style="background: #fff" v-if="isShow">
      <GoogleMap
        api-key="AIzaSyCR227V4Ygq-hIzpUVEfONajYwSLmb7Pew"
        style="width: 100%; height: 500px"
        :center="center"
        :zoom="15"
      >
        <Marker :options="{ position: center }" />
      </GoogleMap>
      <Bottom></Bottom>
    </div>
  </div>
</template>

<script setup lang="js">
import { reactive, defineComponent ,onMounted,ref,nextTick} from "vue";
// import { onMounted } from 'vue'
import Nav from '../components/nav.vue'
import Bottom from '../components/bottom.vue'
import { GoogleMap, Marker } from 'vue3-google-map'

const center = { lat: 40.689247, lng: -74.044502 }

const options = reactive({
  title: "", //视频名称
  type: "video/mp4", // 类型
  src:'',
  muted: true, //静音
  webFullScreen: false,
  autoPlay: true, //自动播放
  loop: false, //循环播放
  volume: 0, //默认音量大小
  control: false, //是否显示控制
});

const arr = ['https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4', 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4']

options.src =arr[0]

let i = ref(0)
const ended = (ev) => {
  if (i.value === arr.length - 1) {
    i.value = 0
  } else {
    i.value++
  }
  options.src =arr[i.value]
};
// const onPause = (ev) => {
//   console.log(ev, "暂停");
// };

// const onTimeupdate = (ev) => {
//   console.log(ev, "时间更新");
// };
// const onCanplay = (ev) => {
//   console.log(ev, "可以播放");
// };


let isShow = ref(false)

let down = () => {
  isShow.value = true
  nextTick(() => {
    document.querySelector('.brand-con').scrollIntoView({
      behavior: "smooth",
      top:'100px'
    })
  })

}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100vh;
  position: relative;
  // display: flex;
  // flex-direction: column;
  .header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999999;
    backdrop-filter: blur(6px);
    // background-color: linear-gradient(
    //   180deg,
    //   rgb(123, 0, 0) 0%,
    //   rgba(12, 69, 135, 0.29) 76%,
    //   transparent
    // );
    background: rgb(0, 0, 0, 0.6);
  }
  .page-contents:deep {
    display: flex;
    // height: 100vh;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    .icon-jiantou {
      position: absolute;
      bottom: 20px;
      font-size: 40px;
      font-weight: 5 00;
      left: 50%;
      margin-left: -40px;
      color: rgb(255, 255, 255, 0.65);
      transform: scaleY(0.7);
      cursor: pointer;
      padding: 20px;
      box-sizing: content-box;
      -webkit-animation: opener 1.5s ease-in-out alternate infinite;
      animation: opener 1.5s ease-in-out alternate infinite;
    }
    // overflow: hidden;
    .d-player-wrap {
      width: 100vw;
      min-height: 100vh !important;
      z-index: -1;
      background-size: cover;
      object-fit: fill;
      .d-player-video {
        // height: auto !important;
        .d-player-video-main {
          object-fit: cover;
        }
      }
    }
  }
}

@keyframes opener {
  0% {
    bottom: 20px;
  }
  50% {
    bottom: 40px;
  }
  100% {
    bottom: 20px;
  }
}
</style>
